<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :border="false"
      title="增值服务"
      fixed
      left-icon="back"
      @clickLeft="goBack"
    />

    <!-- Tab 切换 -->
    <view class="tab-bar">
      <view
        class="tab-item"
        :class="{ active: activeTab === 'combo' }"
        @click="switchTab('combo')"
      >
        <text>组合套餐</text>
      </view>
      <view
        class="tab-item"
        :class="{ active: activeTab === 'all' }"
        @click="switchTab('all')"
      >
        <text>全部服务包</text>
      </view>
    </view>

    <!-- 服务列表 -->
    <scroll-view class="service-list" :scroll-y="true">
      <view v-if="currentServices.length > 0" class="list-content">
        <view
          v-for="service in currentServices"
          :key="service.id"
          class="service-item"
        >
          <image :src="service.image" class="service-image" mode="aspectFit" />
          <view class="service-info">
            <text class="service-name">{{ service.name }}</text>
            <view class="service-price-row">
              <text class="service-price">¥ {{ service.price }}</text>
              <text class="service-unit">{{ service.unit }}</text>
            </view>
          </view>
          <view class="buy-button" @click="handleBuy(service)">
            <text>购买</text>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-else class="empty-state">
        <view class="empty-icon">
          <uni-icons type="list" size="80" color="#d9d9d9"></uni-icons>
        </view>
        <text class="empty-text">暂无数据~</text>
      </view>
    </scroll-view>

    <!-- 右下角固定按钮 -->
    <view class="fixed-buttons">
      <view class="fixed-btn" @click="handleCart">
        <uni-icons type="cart" size="24" color="#FFB200"></uni-icons>
      </view>
      <view class="fixed-btn" @click="handleOrders">
        <uni-icons type="compose" size="24" color="#FFB200"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";

// 当前激活的 tab
const activeTab = ref("combo");

// 组合套餐服务
const comboServices = ref([
  {
    id: 1,
    name: "智慧版授权",
    price: "1.00",
    unit: "/天",
    image: "/static/logo.png",
  },
  {
    id: 2,
    name: "子门店席位",
    price: "100.00",
    unit: "/个",
    image: "/static/logo.png",
  },
]);

// 全部服务包
const allServices = ref([
  {
    id: 1,
    name: "智慧版授权",
    price: "1.00",
    unit: "/天",
    image: "/static/logo.png",
  },
  {
    id: 2,
    name: "子门店席位",
    price: "100.00",
    unit: "/个",
    image: "/static/logo.png",
  },
]);

// 当前显示的服务列表
const currentServices = computed(() => {
  return activeTab.value === "combo" ? comboServices.value : allServices.value;
});

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 切换 tab
const switchTab = (tab) => {
  activeTab.value = tab;
};

// 处理购买
const handleBuy = (service) => {
  console.log("购买服务:", service);
  uni.navigateTo({
    url: `/pages/mine/valueAddedService/serviceDetail?id=${service.id}`,
  });
};

// 处理购物车
const handleCart = () => {
  uni.navigateTo({
    url: "/pages/mine/valueAddedService/cart",
  });
};

// 处理订单
const handleOrders = () => {
  uni.navigateTo({
    url: "/pages/mine/valueAddedService/orderList",
  });
};
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

// Tab 栏
.tab-bar {
  display: flex;
  background-color: #fff;
  padding: 0 30rpx;
  position: sticky;
  top: 88rpx;
  z-index: 10;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 24rpx 0;
  font-size: 28rpx;
  color: #666;
  position: relative;

  &.active {
    color: #333;
    font-weight: 600;

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60rpx;
      height: 4rpx;
      background-color: #ffb200;
      border-radius: 2rpx;
    }
  }

  &:active {
    opacity: 0.7;
  }
}

// 服务列表
.service-list {
  height: calc(100vh - 88rpx - 72rpx - 20rpx);
  padding: 20rpx 30rpx;
}

.list-content {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.service-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
  background-color: #fff;
  padding: 24rpx;
  border-radius: 12rpx;
}

.service-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  flex-shrink: 0;
}

.service-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.service-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.service-price-row {
  display: flex;
  align-items: baseline;
  gap: 8rpx;
}

.service-price {
  font-size: 32rpx;
  color: #ff4d4f;
  font-weight: 600;
}

.service-unit {
  font-size: 24rpx;
  color: #999;
}

.buy-button {
  padding: 16rpx 40rpx;
  background-color: #ffb200;
  border-radius: 50rpx;
  flex-shrink: 0;

  text {
    font-size: 28rpx;
    color: #333;
    font-weight: 600;
  }

  &:active {
    opacity: 0.8;
  }
}

// 空状态
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
  background-color: #fff;
  border-radius: 12rpx;
}

.empty-icon {
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

// 右下角固定按钮
.fixed-buttons {
  position: fixed;
  right: 30rpx;
  bottom: calc(100rpx + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  z-index: 100;
}

.fixed-btn {
  width: 96rpx;
  height: 96rpx;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

  &:active {
    opacity: 0.8;
  }
}
</style>
